<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华为商城</title>
    <link rel="stylesheet" href="../static/stylesheets/swiper.css">
    <link rel="stylesheet" href="../static/stylesheets/public.css">
    <link rel="shortcut icon" href="https://www.vmall.com/favicon.ico">
    <link rel="stylesheet" href="../static/stylesheets/headerList.css">
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>

    <!-- 头部及下面的导航栏 -->
    @@include('./template/header.html')
    @@include('./template/header-bottomList.html')

    <div class="href bancen">
        <p>首页 > 耳机音箱 > 真无线耳机 >  【新品】HUAWEI FreeBuds 4i 无线耳机（蜜语红）主动降噪 通话降噪 环境音透传 10小时连续播放 快充长续航 纯净音质</p>
    </div>
    <main class="bancen">
        <div class="main-left" id="left-render">
            <div>
                <img src="https://res.vmallres.com/pimages//product/6941487207756/group//800_800_E9D4437CEC4AAF4C5DBB968F29AC17C4F38C0EDFB6D83FD3.png" alt="">
            </div>
            <dt class="res">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_7001E4908CCA42A9EB7106570F9E055940B5E46B0E10F6D5.png" alt=""></div>
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_BD2A805F04A6B9F81CA4D893F2F437E54163AB8708A9C10F.png" alt=""></div>
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_41AC6F831208891EECF71DB589E20BA81B6535F55D1557A7.png" alt=""></div>
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_4D568D789326629BB2AE2E8B70D3DBE300EEF4F163099743.png" alt=""></div>
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_DD25C22992E56F97E7ED9A2A925134C898B6594AB5FD129D.png" alt=""></div>
                        <div class="swiper-slide myWidth"><img src="https://res.vmallres.com/pimages//product/6941487207756/group//78_78_DA230ED11B1BF8FD80B07DB113835E7C1E5751D8F572A87E.jpg" alt=""></div>
                    </div>
                </div>
                <div class="swiper-button-prev"></div><!--左箭头。如果放置在swiper-container外面，需要自定义样式。-->
                <div class="swiper-button-next"></div><!--右箭头。如果放置在swiper-container外面，需要自定义样式。-->
            </dt>
        </div>
        <div class="main-right" id="right-render">
            <h3>【新品】HUAWEI FreeBuds 4i 无线耳机（陶瓷白）主动降噪 通话降噪 环境音透传 10小时连续播放 快充长续航 纯净音质</h3>
            <p>【9.9特惠预订】：①预订立省50元 ②下单享3期免息 丨点击立即预订 > > ></p>
            <div class="gray">
                <div class="price">
                    <div class="left-margin price-left">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</div>
                    <dt class="right price-right">494</dt>
                </div>
                <div class="activity">
                    <div class="left-margin">促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</div>
                    <dt class="right">
                        <div><span>专享整点赠</span> 0/10/24</div>
                        <div><span>专享整点赠</span> 0/10/24</div>
                        <div><span>专享整点赠</span> 0/10/24</div>
                    </dt>
                </div>
            </div>
                <div class="server clear">
                    <div class="left-margin">服务说明</div>
                    <dt class="right">
                        <select name="server" id="server-select">
                            <option value="威海">威海</option>
                            <option value="北京">北京</option>
                            <option value="上海">上海</option>
                            <option value="广州">广州</option>
                            <option value="深圳">深圳</option>
                            <option value="曹县">曹县</option>
                        </select>
                    </dt>
                </div>
                <div class="code clear">
                    <div  class="left-margin">商品编码</div>
                    <dt class="right">3100220202202020</dt>
                </div>
                <div class="color clear">
                    <div  class="left-margin">选择颜色</div>
                    <dt class="right clear">]]]]]]]]]]
                        <div class="box">
                            <img src="https://res.vmallres.com/pimages//product/6941487207756/40_40_A6A30621B8088CBBAF2D831A44CA9E945FEB6E9B64A1E201mp.png" alt="">
                            陶瓷白
                        </div>
                        <div class="box">
                            <img src="https://res.vmallres.com/pimages//product/6941487207749/40_40_711F9B10AC6F7C28739F8C8F281BE9C8931C9A9CB34DA514mp.png" alt="">
                            陶瓷黑
                        </div>
                        <div class="box">
                            <img src="https://res.vmallres.com/pimages//product/6941487207763/40_40_C6F4C5B6D90A0F420DAFD1AFC7B8ACA520A0550AB0D2FC27mp.png" alt="">
                            陶瓷红
                        </div>
                    </dt>
                </div>
                <div class="edition clear">
                    <div class="left-margin">选择版本</div>
                    <dt class="right">
                        <div class="box">
                            官方标配
                        </div>
                    </dt>
                </div>
                <div class="plan clear">
                    <div class="left-margin">选择套餐</div>
                    <dt class="right">
                        <div class="box">单品</div>
                        <div class="box">听书卡</div>
                        <div class="box">半年卡</div>
                    </dt>
                </div>
                <div class="free clear">
                    <div class="left-margin">分期免息</div>
                    <dt class="right">
                        <div class="box">花呗分期</div>
                        <div class="box">掌上生活分期</div>
                    </dt>
                </div>
                <div class="recommend clear">
                    <div class="left-margin">推荐</div>
                    <dt class="flex right clear">
                        <div class="box clear">
                            <img src="https://res.vmallres.com/pimages//product/6941487222216/428_428_6007BB44AB225ED6AABA0AECFECDACF74F01F03E1F5A4B27mp.png" alt="">
                            <div>free buds 4</div>
                        </div>
                        <div class="box clear">
                            <img src="https://res.vmallres.com/pimages//product/6941402752767/428_428_30379294228B124CE71EF2F33DB7854D10CA01415086A732mp.png" alt="">
                            <div>free Lacei 4</div>
                        </div>
                        <div class="box clear">
                            <img src="https://res.vmallres.com/pimages//product/6972453168856/428_428_94D75FA5BCE9CB4D23F60AF69D2B27A742B6C88278AB9D69mp.png" alt="">
                            <div>free Freelace 4i</div>
                        </div>
                        <div class="box clear">
                            <img src="https://res.vmallres.com/pimages//product/6941487210800/428_428_E739A62C0481DE35875A3744C66E643CEEEC8B0372B22790mp.png" alt="">
                            <div>free Eleemen</div>
                        </div>
                    </dt>
                </div>
                <div class="selected clear">
                    <div class="left-margin">已选商品</div>
                    <dt class="right">
                        <div class="red">密语红/官方标配/单品</div>
                    </dt>
                </div>
                
                <div class="btns">
                    <div>1</div>
                    <dl>
                        <dd id="add">+</dd>
                        <dd id="reduce">-</dd>
                    </dl>
                    <button class="cart">加入购物车</button>
                    <button class="buy">立即下单</button>
                </div>
        </div>
        <div id="gocart-render">
            
        </div>
    </main>


    <section>
        <img src="" alt="">
    </section>





    <div class="jingubang"></div>

    <!-- 尾部 -->
    @@include('./template/footer.html')

    <script src="../static/javascripts/jQuery.js"></script>
    <script src="../static/javascripts/axios.js"></script>
    <script src="../static/javascripts/utils.js"></script>
    <script src="../static/javascripts/swiper.js"></script>
    <script src="../static/javascripts/headfooter.js"></script>
    
</body>
<script src="../static/javascripts/page-login.js"></script>
<script src="./javascripts/detail.js"></script>
</html>